<template>
  <div class="content">
    <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!--点-->
      <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
  export default {
    name: "demo",
    data: () => ({
      map: {
        center: { lng: 116.897656 , lat: 36.674961 },
        zoom: 18,
        show: true,
        dragging: true
      },
    }),
    methods: {
      handler({ BMap, map }) {
        // 鼠标缩放
        map.enableScrollWheelZoom(true);
        // 点击事件获取经纬度
        var path = [];//本人的示例是要走规定经过的路线，所以中间有多经过点
        path.push([116.897656, 36.674961])
        path.push([116.903605, 36.674987])

        path.push([116.903605, 36.674987])
        path.push([116.907054, 36.6771])

        path.push([116.907054, 36.6771])
        path.push([116.911726, 36.677013])

        path.push([116.911726, 36.677013])
        path.push([116.911294, 36.674523])

        path.push([116.911294, 36.674523])
        path.push([116.914888, 36.672468])

        path.push([116.914888, 36.672468])
        path.push([116.916684, 36.674552])

        // path.push([113.772022, 22.93014])
        // path.push([113.775806, 22.932607])
       
       
var data_info = [
					 [116.903605,36.674987,"时间：第一步"],
           [116.907054,36.6771,"时间：第二步"],
           [116.911726,36.677013,"时间：第三步"],
           [116.911294,36.674523,"时间：第四步"],
           [116.914888,36.672468,"时间：第五步"],
           
					];
	var opts = {
				width : 250,     // 信息窗口宽度
				height: 80,     // 信息窗口高度
				title : "信息窗口" , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	for(var i=0;i<data_info.length;i++){
		var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
		var content = data_info[i][2];
		map.addOverlay(marker);               // 将标注添加到地图中
		addClickHandler(content,marker);
	}
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
    map.openInfoWindow(infoWindow,point); //开启信息窗口
  }

        for (let i = 0; i < path.length; i += 2) {
            setTimeout(function(){
          var walking = new BMap.WalkingRoute(map, {
            renderOptions: {
              map: map,
              autoViewport: true
            },
            onPolylinesSet: function (routes) {
              let searchRoute = routes[0].getPolyline();//导航路线
              map.removeOverlay(searchRoute);//移除查询出来 的路线
            },
            onMarkersSet: function (routes) {
              map.removeOverlay(routes[0].marker); //删除起点
              map.removeOverlay(routes[routes.length - 1].marker); //删除终点
            }
          });
          let _this = this;
          var start = new BMap.Point(path[i][0], path[i][1]);
          var end = new BMap.Point(path[i + 1][0], path[i + 1][1]);
          walking.search(start, end);
          walking.setSearchCompleteCallback(function () {
            var plan = walking.getResults().getPlan(0);
            for (let j = 0; j < plan.getNumRoutes(); j++) {
              var pts = plan.getRoute(j).getPath();
              var polyline = new BMap.Polyline(pts, { strokeColor: "#ff0000", strokeWeight: 5, strokeOpacity: 1 });//重新划路线
             
              map.addOverlay(polyline);
              
            }
          })
            },500)
        }
        map.addEventListener('click', function (e) { // 点击地点获取经纬度
          console.log(e.point.lng, e.point.lat)
        })
      }
    },
   mounted() {
     
    }
  }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 100%;
  }

  span {
    display: none;
  }

  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .BMap_bubble_content{
    border: 10px solid red;
  }
</style>